<script lang="ts" setup>
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent, useWebsocket } from '@/hooks'
import { useSubPage } from './composables'
// import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { ref } from 'vue'
import { getDialogueTopicDetail } from '@/services/api'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { onLoad, onShow } from '@dcloudio/uni-app'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
const {
  navBarInfo,
  userInfo,
  loginHandle,
  navUserInfoPage,
  navCommonProblemPage,
  navMemberRightsPage,
  navOrderListPage,
  navbarInitFinishHandle,
} = useSubPage()
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
const { base64toJson } = useWebsocket()
const recordList = ref<Array>([
  {
    type: 1,
    origin: 'Hello，小明',
    result: 'HELLO,XIAO MING',
    filename: '123.MP3',
  },
  {
    type: 2,
    origin: '你好，小明',
    result: 'HELLO,XIAO MING222',
    filename: '123.MP3',
  },
])
const dataDetail = ref()
const showPopup = ref(false)
const setTitle = ref('')
const setId = ref('')
const handleTalk = () => {
  showPopup.value = true
}
const handleCloseMessage = () => {}
const handleClose = () => {
  showPopup.value = false
}
const handleClick = (type: string) => {
  tnNavPage(
    `/home-page/sceneTeaching/dialogueDetail/index?name=${setTitle.value}&id=${setId.value}`
  )
}
onReady(() => {})
onLoad((option) => {
  console.log(option, '2112')
  setTitle.value = option.name
  setId.value = option.id
  getDetail(option.id)
})
const getDetail = (id) => {
  getDialogueTopicDetail({ id: id }).then((res) => {
    const { code, data } = res
    if (code == 0) {
      console.log('6666', data)
      dataDetail.value = {
        ...data,
        // challenge: JSON.parse(base64toJson(data.challenge)),
        // challenge: JSON.parse(data.challengeChinese),
        challenge: [
          { chinese: data.challengeChinese, english: data.challengeEnglish },
        ],
      }
      // console.log(JSON.stringify(dataDetail.value),"ee")
    }
  })
}
onPageScroll((e) => {})
</script>

<template>
  <view class="top-bg" />
  <!-- 顶部切换 -->
  <TnNavbar
    fixed
    bg-color="#FFFFFF"
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
  >
    <view class="tn-color-black">{{ setTitle }}</view>
  </TnNavbar>
  <!-- 内容 -->
  <view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">
    <view class="pa-8" style="width: 720rpx; margin: 0 auto">
      <view class="mt-6 font-w-bold" style="color: #876fd1">话题介绍</view>
      <view class="mt-6 font-w-bold"
        >话题名称：{{ dataDetail.topicChinese }}</view
      >
      <view class="flex mt-8">
        <image
          style="width: 68rpx; height: 68rpx"
          class="radius-50"
          src="https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242345-assets/web-upload/7c70f145-2c93-423e-a9e0-c8ab00b9c0ae.jpeg"
        >
        </image>
        <view class="ml-4">
          <view class="font-size-14">AI私教</view>
          <view class="font-size-12 mt-2 font-color-a6a9cb">{{
            dataDetail.myRoleChinese
          }}</view>
        </view>
      </view>

      <view class="flex mt-6">
        <image
          style="width: 68rpx; height: 68rpx"
          class="radius-50"
          src="https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242345-assets/web-upload/7c70f145-2c93-423e-a9e0-c8ab00b9c0ae.jpeg"
        >
        </image>
        <view class="ml-4">
          <view class="font-size-14">我的角色</view>
          <view class="font-size-12 mt-2 font-color-a6a9cb">{{
            dataDetail.aiRoleChinese
          }}</view>
        </view>
      </view>
    </view>
    <view class="king-list tn-margin-top-sm mt-8">
      <view class="pl-8 font-w-bold">目标</view>
      <view class="king-item tn-color-light tn-icon-circle-fill">
        <view>
          <view class="resume text-lg text-left mb-12">
            <view class="pl-20">
              <view class="fr">{{ dataDetail.targetChinese }}</view>
              <view class="fr">{{ dataDetail.targetEnglish }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="pl-8 font-w-bold">挑战</view>
      <view class="king-item text-left tn-color-light tn-icon-circle-fill">
        <view
          class="resume text-lg text-left mb-12"
          v-for="(item, index) in dataDetail.challenge"
          :key="index"
        >
          <view class="pl-20">
            <view class="fr">{{ item.chinese }}</view>
            <view class="fr">{{ item.english }}</view>
          </view>
        </view>
      </view>
      <view class="flex flex-js-center mt-40" @click="handleClick('start')">
        <TnButton
          size="lg"
          type="primary"
          style="margin: 0 auto"
          width="380"
          height="80"
          >开始对话</TnButton
        >
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>
